<template>
    <div>
        <div v-for="item in imglist" class="imagedivtwo">
            <el-image :src="item" class="elimage" :z-index=3000 :preview-src-list="imglist"></el-image>
            <div class="shadeimage">
                <el-link class="ellink" icon="el-icon-delete" :underline="false" @click="delectfile(item)"></el-link>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "ImagesAssembly",
        props:{
            imglist:{
                type:Array,
                required:true,
            },
        },
        methods:{
            //删除文件
            delectfile(obj){
                this.$http.get('PublicMethodApi/DeleteFileByUrl?url='+ obj).then(res=>{
                    if (res) {
                        this.$message.success("删除成功");
                        for (let i=0;i<this.imglist.length;i++){
                            if (this.imglist[i] == obj)
                            {
                                this.imglist.splice(i,1)
                                return
                            }
                        }
                    }
                    else {
                        this.$message.warning("删除失败");
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .shadeimage{
        position: absolute;
        width: fit-content;
        display: inline;
        width: 146px;
        height: 146px;
        opacity: 0;
    }
    .imagedivtwo{
        height: 146px;
        width: 146px;
        display: inline-grid;
        margin: 3px 5px;
    }
    .ellink{
        font-size: 37px;
        position: absolute;
        transform: translate(-50%, -60%);
        top: 50%;
        left: 50%;
    }
    .elimage{
        height: 146px;
        width:146px;
        padding: 0px 3px;
        display: inline-block
    }
    .shadeimage:hover{
        display: inline;
        opacity:1;
        background-color: rgba(62, 62, 62, 0.2);
    }
</style>
